<template>
  <div class="fixed top-0 left-0 bg-base-100 w-full h-full z-40 ">
    <!--顶部栏-->
    <div class="fixed z-50 flex justify-center items-center w-full h-[10vh] bg-primary  text-md">
      <div class="w-2/12 md:w-1/12 flex justify-center">
        <div @click="router.go(-1)" class="">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"/>
          </svg>
        </div>
      </div>
      <div class="w-8/12 md:w-10/12 flex justify-start pl-2">
        歌单
      </div>
      <div class="w-2/12 md:w-1/12 flex justify-center">
        <div class="">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
          </svg>
        </div>
      </div>
    </div>
    <!--内容-->
    <div class="overflow-y-auto w-full h-[90vh] fixed top-[10vh] left-0">
      <div class="flex absolute flex-col top-0 justify-center items-center w-full px-5 py-6 ">
        <!--头部展示区-->
        <div class="flex flex-row justify-center items-start w-full">
          <div class="w-2/6 md:w-1/6 h-full flex justify-center items-center">

            <svg class="fill-primary w-full h-full " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
            </svg>

          </div>
          <div class="w-4/6 md:w-5/6 h-full flex flex-col justify-start items-start pl-2">
            <div class="h-1/6 w-full flex justify-start items-center text-2xl">{{ playlist?.name }}</div>
            <div class="h-1/6 w-full flex justify-start items-center text-xs">{{ playlist?.remark }}</div>
            <div class="h-5/6 w-full flex justify-start items-start text-md pt-2">
              <div class="text-base-content/50 rounded-full flex justify-start items-center cursor-pointer gap-2">
                <img v-if="user?.['avatar'] !=null"  :srcset="user?.['avatar']"  class="avatar w-12 h-12 object-cover rounded-full">
                <div v-else class="flex justify-center text-2xl items-center avatar btn btn-primary w-12 h-12 object-cover rounded-full mx-2">{{ user?.['username'].substring(0,1).toUpperCase() }}</div>
                {{ user?.['username'] ?? "未知" }}
              </div>
            </div>
          </div>
        </div>
        <!--歌曲列表-->
        <div class="flex flex-col rounded-2xl  justify-center items-center w-full mt-8  bg-base-100 shadow-2xl">
          <div class="h-16 w-full flex flex-row justify-center items-center px-5 py-6 ">
            <div class="w-1/12 flex justify-center items-center">
              <svg @click="hook_addSongsToPlayerList(songs,true,true)" xmlns="http://www.w3.org/2000/svg" fill="none"
                   viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor"
                   class="fill-primary w-12 h-12 hover:fill-secondary">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z"/>
              </svg>
            </div>
            <div class="w-5/12 md:w-8/12 flex justify-start items-center ml-2">
              播放全部
              <div class="text-xs text-base-content/50 ml-1">
                ({{ songs?.length }})
              </div>
            </div>
            <div class="w-2/12 md:w-1/12  flex justify-center items-center btn-ghost rounded-full">
            </div>
            <div class="w-2/12 md:w-1/12  flex justify-center items-center  btn-ghost rounded-full">
            </div>
            <div @click="hook_addSongsToPlayerList(songs)"
                 class="w-2/12 md:w-1/12  flex justify-center items-center btn-ghost rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"/>
              </svg>
            </div>
          </div>
          <div v-if="songs != null" class="w-full flex flex-col justify-center items-center">
            <song-bar :class="[{'rounded-b-2xl': songs.length==index+1} ,{'border-b': songs.length!=index+1} , {'border-t': index==0} ,'border-black/20 px-2']"
                v-for="(song,index) in songs"
                :song="song"
                :index="index"
                :key="song.id"
                @deleteSongBar="updateData()"
                :playlistId="playlistId"
                :playlist="playlist"
                :is-playlist="true">
            </song-bar>
          </div>
          <div v-else class="w-full flex flex-col justify-center items-center px-5 py-6">
            暂无歌曲
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../plugins/router.ts";
import {
  hook_findUserById,
  hook_findUserByPlaylistId,
  hook_getFavorite,
  hook_getFavoriteByUserId,
  hook_getUser
} from "../hook/UserHook.ts";
import SongBar from "../components/SongBar.vue";
import {hook_findSongById, hook_findSongByPlaylistId} from "../hook/SongHook.ts";
import {onBeforeMount, onMounted, onUpdated, ref} from "vue";
import {hook_checkSongIsFavorite, hook_findFavoriteSongByUserId} from "../hook/FavoriteHook.ts";
import {indexOf} from "lodash";
import {hook_addSongsToPlayerList} from "../hook/SongPlayerHook.ts";
import {hook_findPlaylistById} from "../hook/PlaylistHook.ts";

let props = defineProps<{
  playlistId
}
>()

let playlist = ref()
let songs = ref()
let user = ref()

onBeforeMount(async () => {
  console.log(props.playlistId)
  await updateData()
  user.value = await hook_findUserByPlaylistId(props.playlistId);
  console.log(user.value)
})


//更新数据
async function updateData() {
  playlist.value = await hook_findPlaylistById(props.playlistId)
  songs.value = await hook_findSongByPlaylistId(props.playlistId)
}


</script>

<style scoped>

</style>